<template>
    <div>
      <el-card style="height:90vh; ">
        <div class="mt-4">
          <el-input
            v-model="input3"
            style="max-width: 600px"
            placeholder="请输入宿舍号"
            class="input-with-select"
          >
            <template #prepend>
              宿舍号
            </template>
            <template #append>
              <el-button @click="selectClick()" :icon="Search" />
            </template>
          </el-input>
          <el-button type="primary" style="margin-left: 60px;" @click="handleClick2 = true">添加</el-button>
          <el-button type="primary" style="margin-left: 60px;" @click="BackClick">返回</el-button>
        </div>
        <el-table :data="option" style="width: 100%">
    <el-table-column fixed prop="dormitoryId" label="宿舍号" width="200" align="center" />
    <el-table-column prop="utilityBills" label="水电费" width="200" align="center" />
    <el-table-column prop="laundry" label="洗衣费" width="200" align="center" />
    <el-table-column prop="waterCharges" label="直饮水费" width="200" align="center" />
    <el-table-column prop="all" label="全部" width="200" align="center" />
    <el-table-column fixed="right" label="Operations" min-width="200" align="center">
      <template #default="{ row }">
        <el-button link type="primary" size="small" @click="showDetail(row)">
          修改
        </el-button>
        <el-button link type="primary" size="small" @click="deleteDorms(row.dormitoryId)">删除</el-button>
        <el-button link type="primary" size="small" @click="deleteDorms(row.dormitoryId)">删除</el-button>
      </template>
    </el-table-column>
  </el-table>
  <el-dialog
      v-model="handleClick"
      title="修改宿舍信息"
      width="500"
      align-center
    >
      <el-form
          :model="form"
          label-width="120px"
          label-position="left"
        >
              <el-form-item label="宿舍号" prop="dormitoryId">
                <el-input
                  v-model="form.dormitoryId"
                  placeholder="宿舍号"
                />
              
              </el-form-item>
              <el-form-item label="水电费" prop="utilityBills">
                <el-input
                  v-model="form.utilityBills"
                  placeholder="水电费"
                />
              </el-form-item>
              <el-form-item label="洗衣费" prop="laundry">
                <el-input
                  v-model="form.laundry"
                  placeholder="请输入洗衣费"
                />
              </el-form-item>
              <el-form-item label="直饮水费" prop="waterCharges">
                <el-input
                  v-model="form.waterCharges"
                  placeholder="请输入直饮水费"
                />
              </el-form-item>
        </el-form>
      <template #footer>
        <div class="dialog-footer">
          <el-button @click="handleClick = false">取消按钮</el-button>
          <el-button type="primary" @click="upDataDor()">
            确认
          </el-button>
        </div>
      </template>
    </el-dialog>
    <el-dialog
      v-model="handleClick2"
      title="宿舍信息"
      width="500"
      align-center
    >
      <el-form
          :model="form"
          label-width="120px"
          label-position="left"
        >
              <el-form-item label="宿舍号" prop="dormitoryId">
                <el-input
                  v-model="form.dormitoryId"
                  placeholder="请输入宿舍"
                />
              </el-form-item>
      
        </el-form>
      <template #footer>
        <div class="dialog-footer">
          <el-button @click="handleClick2 = false">取消按钮</el-button>
          <el-button type="primary" @click="addDors()">
            确认
          </el-button>
        </div>
      </template>
    </el-dialog>
      </el-card>
    </div>
  </template>
  
  <script setup>
  import { onMounted, ref } from 'vue'
  import { Plus, Search } from '@element-plus/icons-vue'
  import { getDorm,getList,getAllList,getDormList,upDorm,addDor,deleteDorm} from '@/servers/modules/index'
  
  const select = ref('')
  const input3 = ref('')
  const handleClick = ref(false)
  const handleClick2 = ref(false)
  
  
  const form = ref({})
  
  const value = ref('')
  
  const options = ref([])
  const option = ref([])
  
  let sum = ref(0)


  //返回所有宿舍信息
  const BackClick = () => {
    getAllList().then((res) => {
      console.log(res)
      tableData.value = res.data
    })
    getDormList().then((res) => {
      option.value = res.data
      options.value = option.value.map((item) => {
        return {
          value: item.dormitoryId,
          label: item.dormitoryId
        }
      })

      option.value.forEach((item) => {
      sum = item.utilityBills + item.laundry + item.waterCharges
      item.all = sum
      console.log('这是 sum 的值:', item)
    })
    })
    ElMessage({
    message: '返回成功',
    type: 'success',
  })
}
//查找宿舍
const selectClick = async () => {
  console.log('这是 input3 的值:', input3.value);
  const response = await getDorm(input3.value);
  console.log('这是 response 的值:', response);
  if(response.code == 201) {
    ElMessage({
    message: response.message,
    type: 'warning',
  })
  }else{
    ElMessage({
    message: response.message,
    type: 'success',
  })
  option.value = response.data;
  options.value = option.value.map((item) => {
        return {
          value: item.dormitoryId,
          label: item.dormitoryId
        };
      });
      option.value.forEach((item) => {
        sum = item.utilityBills + item.laundry + item.waterCharges;
        item.all = sum;
        console.log('这是 sum 的值:', item);
      });
  
  console.log('这是 tableData 的值:', option.value); 
  }
}

//删除宿舍
const deleteDorms = async (dormitoryId) => {
  console.log('这是 dormitoryId 的值:', dormitoryId);
  const response = await deleteDorm(dormitoryId);
  if(response.code == 201) {
    ElMessage({
    message: response.message,
    type: 'warning',
  })
  }else{
    ElMessage({
    message: response.message,
    type: 'success',
  })
  }



  
getDormList().then((res) => {
      console.log('张三', res);
      option.value = res.data;
      options.value = option.value.map((item) => {
        return {
          value: item.dormitoryId,
          label: item.dormitoryId
        };
      });
      option.value.forEach((item) => {
        sum = item.utilityBills + item.laundry + item.waterCharges;
        item.all = sum;
        console.log('这是 sum 的值:', item);
      });
    });

}
  //增加宿舍
  const addDors = async () => {

    console.log('这是 form.dormitoryId 的值:', form.value.dormitoryId);
    const response = await addDor(form.value.dormitoryId);
    if(response.code == 201) {
    ElMessage({
    message: response.message,
    type: 'warning',
      })
      }else{
        ElMessage({
        message: response.message,
        type: 'success',
      })
      }
    handleClick2.value = false;
    getDormList().then((res) => {
      console.log('张三', res);
      option.value = res.data;
      options.value = option.value.map((item) => {
        return {
          value: item.dormitoryId,
          label: item.dormitoryId
        };
      });
      option.value.forEach((item) => {
        sum = item.utilityBills + item.laundry + item.waterCharges;
        item.all = sum;
        console.log('这是 sum 的值:', item);
      });
    });
};

  //修改宿舍信息
  const upDataDor = async () => {
    console.log('这是 宿舍的值:', form)
    const data = {
      dormitoryId: form.value.dormitoryId,
      utilityBills: form.value.utilityBills,
      laundry: form.value.laundry,
      waterCharges: form.value.waterCharges
    }
    const response = await upDorm(data)
    if(response.code == 201) {
    ElMessage({
    message: response.message,
    type: 'warning',
      })
      }else{
        ElMessage({
        message: response.message,
        type: 'success',
      })
      }
    handleClick.value = false
    getDormList().then((res) => {
      console.log('张三',res)
      option.value = res.data
      options.value = option.value.map((item) => {
        return {
          value: item.dormitoryId,
          label: item.dormitoryId
        }
      })

      option.value.forEach((item) => {
      sum = item.utilityBills + item.laundry + item.waterCharges
      item.all = sum
    })
    })
  }

  const showDetail = (row) => {
    // 将当前行的数据赋值给form对象
    form.value = { ...row };
    console.log(form.value);
    handleClick.value = true;
  }
  
  
  const tableData = ref([])
  
  
  
  onMounted(() => {
    getAllList().then((res) => {
      console.log(res)
      tableData.value = res.data
    })
    getDormList().then((res) => {
      option.value = res.data
      options.value = option.value.map((item) => {
        return {
          value: item.dormitoryId,
          label: item.dormitoryId
        }
      })

      option.value.forEach((item) => {
      sum = item.utilityBills + item.laundry + item.waterCharges
      item.all = sum
      console.log('这是 sum 的值:', item)
    })
    })
  })
  </script>
  
  <style scoped>
  .mt-4 {
    display: flex;
    height: 50px;
    width: 100%;
    display: flex; 
    justify-content: center; 
    align-items: center;
  }
  
  .input-with-select{
    width: 100;
    height: 100%;
  }
  </style>